<script setup lang="ts">
import { ref, onMounted, reactive, nextTick } from "vue";
import * as echarts from "echarts";

// 健康度
const chartDom = ref(null);
let chartInstance = null;
const healthEchat = () => {
    chartInstance = echarts.init(chartDom.value);
    const option = {
        backgroundColor: "rgba(0,0,0,0)",
        series: [
            {
                name: "刻度",
                type: "gauge",
                radius: "53%",
                min: 0, //最小刻度
                max: 100, //最大刻度
                splitNumber: 10, //刻度数量
                startAngle: 225,
                endAngle: -45,
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 1,
                        color: [[1, "rgba(0,0,0,0)"]]
                    }
                }, //仪表盘轴线
                axisLabel: {
                    show: true,
                    color: "#ffffff",
                    distance: 20,
                    formatter: function (v) {
                        switch (v + "") {
                            case "0":
                                return "0";
                            case "10":
                                return "10";
                            case "20":
                                return "20";
                            case "30":
                                return "30";
                            case "40":
                                return "40";
                            case "50":
                                return "50";
                            case "60":
                                return "60";
                            case "70":
                                return "70";
                            case "80":
                                return "80";
                            case "90":
                                return "90";
                            case "100":
                                return "100";
                        }
                    }
                }, //刻度标签。
                axisTick: {
                    show: true,
                    splitNumber: 9,
                    lineStyle: {
                        color: "#fff",
                        width: 0.3
                    },
                    length: -15
                }, //刻度样式
                splitLine: {
                    show: true,
                    length: -25,
                    lineStyle: {
                        color: "#fff",
                        width: 0.5,
                        height: 0.5
                    }
                }, //分隔线样式
                detail: {
                    show: false
                },
                pointer: {
                    show: false
                }
            },
            {
                type: "gauge",
                radius: "40%",
                center: ["50%", "50%"],

                splitNumber: 0, //刻度数量
                startAngle: 225,
                endAngle: -45,
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 15,
                        color: [
                            [
                                0.96,
                                new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    {
                                        offset: 0,
                                        color: "#ffb498"
                                        // color: "#5c53de"
                                    },
                                    {
                                        offset: 1,
                                        color: "#ffb498"
                                        // color: "#18c8ff"
                                    }
                                ])
                            ],
                            [1, "#413e54"]
                        ]
                    }
                },
                //分隔线样式。
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                pointer: {
                    show: false
                },
                title: {
                    show: true,
                    offsetCenter: [0, "-26%"], // x, y，单位px
                    textStyle: {
                        color: "#fff",
                        fontSize: 14
                    }
                },
                //仪表盘详情，用于显示数据。
                detail: {
                    show: true,
                    offsetCenter: [0, "16%"],
                    color: "#ffffff",
                    formatter: function (params) {
                        return params;
                    },
                    textStyle: {
                        fontSize: 20,
                        color: "#ffab91"
                    }
                },
                data: [
                    {
                        name: "总体健康度",
                        value: 96
                    }
                ]
            }
        ]
    };

    chartInstance.setOption(option);
};
const wenduArr = reactive([
    {
        name: '温度健康度',
        value: '100'
    },
    {
        name: '湿度健康度',
        value: '100'
    },
    {
        name: '储能电机健康度',
        value: '90'
    },
    {
        name: '分闸线圈健康度',
        value: '97'
    },
    {
        name: '合闸线圈健康度',
        value: '100'
    }
])
const guiArr = reactive([
    {
        name: '柜体编号',
        value: '11-1MP04'
    },
    {
        name: '柜体型号',
        value: 'KYN28A-12'
    }
])

// 电气数据
interface ElectricalData {
    title: string;
    data: DataItem[];
}

const electricalData = reactive<ElectricalData[]>([
    {
        title: "电流（A）",
        data: [
            {
                name: "la",
                value: 4.4
            },
            {
                name: "lb",
                value: 5.3
            },
            {
                name: "lc",
                value: 5.1
            }
        ]
    },
    {
        title: "电压（V）",
        data: [
            {
                name: "Uab",
                value: 10339.0
            },
            {
                name: "Ubc",
                value: 10355.1
            },
            {
                name: "Uca",
                value: 10337.7
            }
        ]
    },
    {
        title: "功率",
        data: [
            {
                name: "P",
                value: "83.5kW"
            },
            {
                name: "Q",
                value: "22.7kvar"
            },
            {
                name: "S",
                value: "89.9kVA"
            }
        ]
    },
    {
        title: "功率因数",
        data: [
            {
                name: "A",
                value: 0.96
            },
            {
                name: "B",
                value: 0.96
            },
            {
                name: "C",
                value: 0.96
            }
        ]
    },
    {
        title: "电流谐波总含量 （%）",
        data: [
            {
                name: "A",
                value: 7.5
            },
            {
                name: "B",
                value: 7.4
            },
            {
                name: "C",
                value: 7.5
            }
        ]
    },
    {
        title: "电压谐波总含量（%）",
        data: [
            {
                name: "A",
                value: 1.5
            },
            {
                name: "B",
                value: 1.5
            },
            {
                name: "C",
                value: 1.5
            }
        ]
    }
]);


interface DataItem {
    name: string;
    value: string | number
}
// 环境数据
const huanjiData = reactive<DataItem[]>([
    {
        name: "环境温度",
        value: "27.9℃"
    },
    {
        name: "环境湿度",
        value: "80.9%"
    },
    {
        name: "放电-声波",
        value: "1.0"
    },
    {
        name: "放电-电波",
        value: "--"
    },
    {
        name: "A相进线温度",
        value: "30.7℃"
    },
    {
        name: "B相进线温度",
        value: "31.2℃"
    },
    {
        name: "C相进线温度",
        value: "30.5℃"
    },
    {
        name: "A相出线温度",
        value: "30.6℃"
    },
    {
        name: "B相出线温度",
        value: "30.4℃"
    },
    {
        name: "C相出线温度",
        value: "27.9℃"
    },
    {
        name: "烟气0.3",
        value: "3978.0"
    },
    {
        name: "烟气0.5",
        value: "1864.0"
    },
    {
        name: "烟气1",
        value: "14.0"
    },
    {
        name: "烟气2.5",
        value: "0.0"
    },
    {
        name: "烟气5",
        value: "0.0"
    },
    {
        name: "烟气10",
        value: "0.0"
    }
]);

// 湿场数据
const shiChaData = reactive<DataItem[]>([
    {
        name: "温场1-A相进线",
        value: "27.9℃"
    },
    {
        name: "温场1-B相进线",
        value: "80.9%"
    },
    {
        name: "温场1-C相进线",
        value: "1.0"
    },
    {
        name: "温场2-A相进线",
        value: "--"
    },
    {
        name: "温场2-B相进线",
        value: "30.7℃"
    },
    {
        name: "温场2-C相进线",
        value: "31.2℃"
    },
    {
        name: "温场3-A相",
        value: "30.5℃"
    },
    {
        name: "温场3-B相",
        value: "30.6℃"
    },
    {
        name: "温场3-C相",
        value: "27.9℃"
    }
]);

// 设备在线状态
const settType = reactive([
    {
        name: "insight装置",
        isType: true // 开关
    },
    {
        name: "串口服务器",
        isType: true
    },
    {
        name: "断路器室温场",
        isType: true
    },
    {
        name: "母线室温场",
        isType: false
    },
    {
        name: "电缆室温场",
        isType: false
    }
]);

// 开关按钮
const swchChange = (e: any, item: any) => {
    console.log(e, item)
}

// 向ue发送消息 
const sendLevel1 = () => {
  window.ue5("openLeven1", JSON.stringify([{ name: "杨涛" }, { name: "张三" }]))
//   window.ue5("openLeven1","我是vue传过来的值")
}


interface droType {  
    label: string
}
// 分闸线圈
const drowData = reactive<droType[]>([{
    label: "单线图"
},{
    label: "3D模型"
}])
const shebeiValue = ref<string | number | object>("单线图")
const isShowDian = ref(true)
const handleCommand = (command: string | number | object) => {
    if(command == '单线图' ){
        isShowDian.value = true
    }else{
        isShowDian.value = false

    }
    shebeiValue.value = command
}

onMounted(async () => {
    await nextTick(); // 确保DOM已经渲染完成
    healthEchat();
});


</script>

<template>
    <FitScreen :width="1920" :height="1080" mode="fit">
        <div class="maxBox">
            <div class="black11"></div>
            <div class="black22"></div>
            <div class="black33"></div>
            <!-- 上 -->
            <div class="maxBox-top">
                <div class="top-left">
                    <div class="left-item" v-for="(item, index) in guiArr" :key="index">
                        <div class="gui-name">{{ item.name }}</div>
                        <div class="gui-name" style="font-weight: bold;">{{ item.value }}</div>
                    </div>
                </div>
                <div class="top-right">
                    <div class="top-right-left">
                        <!-- <div class="left-title">总体健康度</div> -->
                        <div class="wenChart-box">
                            <div ref="chartDom" style="width: 350px; height: 310px;" class="chartDomcL"></div>
                        </div>
                    </div>
                    <div class="top-right-right">
                        <div class="right-item" v-for="(item, index) in wenduArr" :key="index">
                            <div class="item-1">{{ item.name }}</div>
                            <div class="item-2">{{ item.value }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 中 -->
            <div class="maxBox-middle">
                <div class="middle-left">
                    <div class="threeleft-top">
                        <!-- <div class="top-title">电源数据</div>
                        <div style="display:flex">
                            <el-icon :size="20" color="#ffffff">
                                <CaretBottom />
                            </el-icon>
                        </div> -->
                        <!-- 分闸线 -->
                        <div class="w-100% h-17% bg-#151515 flex flex-col justify-center items-center">
                                    <el-dropdown placement="bottom" @command="handleCommand">
                                        <div class="selectXia">
                                            <div class="mr-10px c-#c6c6c6">{{ shebeiValue }}</div>
                                            <el-icon :size="20" color="#636363">
                                                <CaretBottom />
                                            </el-icon>
                                        </div>
                                        <template #dropdown>
                                            <el-dropdown-menu>
                                                <el-dropdown-item :command="item.label"
                                                    v-for="(item, index) in drowData" :key="index">{{
                                                        item.label }}</el-dropdown-item>
                                            </el-dropdown-menu>
                                        </template>
                                    </el-dropdown>
                                </div>
                    </div>
                    <div class="threeleft-bom-img" v-if="isShowDian"></div>
                    <div class="threeleft-bom" v-else></div>
                </div>
                <!-- <div class="middle-midd"></div> -->
                <div class="middle-right">
                    <div class="rightMaxItem" v-for="(ele, index) in electricalData" :key="index">
                        <div class="minitem rigleft">{{ ele.title }}</div>
                        <div class="numRight rigleft" v-for="(e, i) in ele.data" :key="i">
                            <div class="numRight-top">{{ e.name }}</div>
                            <div class="numRight-bom">{{ e.value }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 下 -->
            <div class="maxBox-bom">
                <!-- 环境数据 -->
                <div class="minTitle">-- 环境数据</div>
                <div class="huanJinData">
                    <div class="huanItem" v-for="(item, index) in huanjiData" :key="index">
                        <div class="huanItem-name">{{ item.name }}</div>
                        <div class="huanItem-name" style="font-weight: bold;">{{ item.value }}</div>
                    </div>
                </div>
                <!-- 温场温度 -->
                <div class="minTitle">-- 温场温度</div>
                <div class="huanJinData">
                    <div class="huanItem" v-for="(item, index) in shiChaData" :key="index">
                        <div class="huanItem-name">{{ item.name }}</div>
                        <div class="huanItem-name" style="font-weight: bold;">{{ item.value }}</div>
                    </div>
                </div>
                <!-- 设备在线状态 -->
                <!-- <div class="minTitle">-- 设备在线状态</div> -->
                <div class="huanJinData">
                    <div class="huanItem" v-for="(item, index) in settType" :key="index">
                        <div class="huanItem-name">{{ item.name }}</div>
                        <div>
                            <el-switch v-model="item.isType" @change="swchChange($event, item)" class="ml-2"
                                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
                        </div>
                    </div>
                    <div class="huanItem pdsbutton" @click="sendLevel1" >
                        <div class="huanItem-name">1楼配电室</div>
                    </div>
                </div>
            </div>
        </div>

    </FitScreen>
</template>

<style lang='scss' scoped>
@use "index";
</style>
